import type { Directive, App } from 'vue';
import { createLoading } from './createLoading';
const loadingDirective: Directive = {
  mounted(el, binding) {
    const tip = binding.value.tip;
    const spinning = binding.value.spinning;
    const size = binding.value.size;
    const fullscreen = binding.value.fullscreen;
    const instance = createLoading(
      {
        tip,
        spinning,
        size: size || 'large',
        absolute: !fullscreen,
      },
      fullscreen ? document.body : el
    );
    el.instance = instance;
  },
  updated(el, binding) {
    const instance = el.instance;
    if (!instance) {
      return;
    }
    instance.setTip(binding.value.tip);
    instance.setSpinning(binding.value.spinning);
  },
  unmounted(el) {
    el?.instance?.close();
  },
};
export function setUpLoadingDirective(app: App) {
  app.directive('loading', loadingDirective);
}

export default loadingDirective;
